<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { updateHarDwareDetailApi } from '@/services/equipment'
import { useDeviceStore } from '@/stores'
import { onUnload } from '@dcloudio/uni-app'
import type { EditHarDware } from '@/types/equipment'
const deviceStore = useDeviceStore()
const sexText = ref<string>()
const proileInfo = ref<EditHarDware>({
  id: 0,
  sex: '',
  age: 0,
  weight: 0,
  name: '',
  picture: '',
})
const handleSex = (val: number) => {
  switch (val) {
    case 0:
      sexText.value = '保密'
      break
    case 1:
      sexText.value = '男'
      break
    case 2:
      sexText.value = '女'
      break
  }
  console.log(val)
}
onLoad(() => {
  console.log(deviceStore?.HarDwareDetail)
  proileInfo.value.id = deviceStore?.HarDwareDetail!.id
  proileInfo.value.sex = deviceStore?.HarDwareDetail!.sex
  handleSex(deviceStore?.HarDwareDetail!.sex)
  proileInfo.value.age = deviceStore?.HarDwareDetail!.age
  proileInfo.value.weight = deviceStore?.HarDwareDetail!.weight
  proileInfo.value.name = deviceStore?.HarDwareDetail!.name
  proileInfo.value.picture = deviceStore?.HarDwareDetail!.picture
})

const actions = [
  {
    name: '男',
  },
  {
    name: '女',
  },
  {
    name: '保密',
  },
]

onUnload(() => {
  deviceStore.getDeviceList()
})
//修改头像
const baseURL = 'https://szsensing.com:8581/'
const updateAvatar = (e: any) => {
  console.log(e)
  proileInfo.value.picture = e.detail.avatarUrl
  uni.uploadFile({
    url: `/slp/user/setPicture/${proileInfo.value.id}`,
    filePath: e.detail.avatarUrl,
    name: 'file',
    success: (res) => {
      console.log(res)
      proileInfo.value.picture = baseURL + JSON.parse(res.data).data
    },
  })
}
const editprofile = async () => {
  const res = await updateHarDwareDetailApi({
    id: proileInfo.value.id,
    name: proileInfo.value.name,
    sex: proileInfo.value.sex,
    picture: proileInfo.value.picture,
    age: proileInfo.value.age,
    weight: proileInfo.value.weight,
  })
  if (res.msg === '对象正常') {
    deviceStore.getHarDwareDetail(deviceStore?.HarDwareDetail!.deviceNum)
    uni.navigateBack()
  } else {
    uni.showToast({
      title: '修改信息失败',
      icon: 'none',
    })
  }
}
const editSex = () => {
  uni.showActionSheet({
    itemList: ['男', '女', '保密'],
    success: function (res) {
      if (res.tapIndex == 2) {
        proileInfo.value.sex = 0
        handleSex(0)
      } else {
        proileInfo.value.sex = res.tapIndex + 1
        handleSex(res.tapIndex + 1)
      }
    },
    fail: function (res) {
      console.log(res.errMsg)
    },
  })
}

const editprofileRules = ref({
  name: {
    rules: [
      { required: true, errorMessage: '请输入昵称' },
      { minLength: 1, maxLength: 8, errorMessage: '昵称长度在 8 个字符以内' },
    ],
  },
  age: {
    rules: [
      { required: true, errorMessage: '请输入1-100年龄' },
      { pattern: /^(100|[1-9][0-9]?)$/, errorMessage: '请输入1-100年龄' },
    ],
  },
  weight: {
    rules: [
      { required: true, errorMessage: '请输入体重' },
      { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, errorMessage: '请输入正数体重' },
    ],
  },
})

const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<template>
  <view class="content">
    <view class="info-box">
      <uni-forms :modelValue="proileInfo" :rules="editprofileRules" validateTrigger="bind">
        <uni-forms-item label="头像" name="avatar">
          <button
            plain
            open-type="chooseAvatar"
            @chooseavatar="updateAvatar"
            style="border-color: white; padding: 0 9.615rpx; position: absolute; right: 19.231rpx; top: auto"
          >
            <view class="avatar">
              <image :src="proileInfo?.picture" mode="scaleToFill" v-if="proileInfo.picture" />
              <image src="@/static/default-avatar.svg" mode="scaleToFill" v-else />
            </view>
          </button>
        </uni-forms-item>
        <uni-forms-item label="昵称" name="name">
          <uni-easyinput
            class="bottom"
            :inputBorder="false"
            v-model="proileInfo.name"
            primaryColor="#c0c4cc"
            :clearable="false"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="性别">
          <view @click="editSex">
            <uni-easyinput
              class="bottom"
              :inputBorder="false"
              v-model="sexText"
              primaryColor="#c0c4cc"
              :clearable="false"
            ></uni-easyinput>
          </view>
        </uni-forms-item>
        <uni-forms-item label="年龄" name="age">
          <uni-easyinput
            class="bottom"
            :inputBorder="false"
            v-model="proileInfo.age"
            primaryColor="#c0c4cc"
            :clearable="false"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="体重" name="weight">
          <uni-easyinput
            class="bottom"
            :inputBorder="false"
            v-model="proileInfo.weight"
            primaryColor="#c0c4cc"
            :clearable="false"
          ></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
      <button class="button" @click="editprofile">确定</button>
    </view>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;
  .content {
    padding: 0 28.846rpx;
    .info-box {
      .uni-forms-item {
        border-top: 0.962rpx solid #ececec;
        margin-bottom: 0;
        padding: 19.231rpx 0;
        &:first-child {
          border-top: 0;
        }
        .avatar {
          margin: 0 auto;
          width: 76.923rpx;
          height: 76.923rpx;
          border-radius: 50%;
          background-color: #eee;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .uni-easyinput__content-input {
          text-align: right;
        }
      }
      .button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 442.308rpx;
        height: 80rpx;
        font-size: 28rpx;
        border-radius: 72rpx;
        color: #fff;
        background-color: #28bb9c;
      }
    }
  }
}
</style>
